<template>
    <div class="eco-problem-view">
        <el-row :gutter="32">
            <!-- 风险分布图 -->
            <el-col :span="8">
                <el-card>
                    <div class="chart-title">问题与风险分布</div>
                    <div ref="pieRef" style="width:100%;height:425px;"></div>
                </el-card>
            </el-col>
            <!-- 主要问题风险列表 -->
            <el-col :span="16">
                <el-card>
                    <div class="section-title">当前主要问题及风险</div>
                    <el-row :gutter="16">
                        <el-col :span="12" v-for="item in problemList" :key="item.title">
                            <el-card class="problem-card" :body-style="{ padding: '14px 18px' }">
                                <div class="problem-title">
                                    <el-tag :type="levelTag(item.level)" size="small">{{ item.level }}</el-tag>
                                    <span style="margin-left:12px;">{{ item.title }}</span>
                                </div>
                                <div class="problem-desc">{{ item.desc }}</div>
                                <div class="problem-advice">
                                    <b>建议：</b>{{ item.advice }}
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <!-- 时间轴和总结 -->
        <el-row style="margin-top:32px;">
            <el-col :span="14">
                <el-card>
                    <div class="section-title">近期待处理问题</div>
                    <el-timeline>
                        <el-timeline-item v-for="item in timeline" :key="item.date" :timestamp="item.date"
                            :color="item.color">
                            <b>{{ item.title }}</b>
                            <span style="margin-left:8px;color:#888;">{{ item.desc }}</span>
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card>
                    <div class="section-title">风险与问题总结</div>
                    <div class="problem-summary">
                        目前项目主要风险包括技术难点、工期延误与极端天气影响，已采取动态监测与预案措施。<br>
                        <ul>
                            <li>建议持续跟踪关键区域进度。</li>
                            <li>加强与材料供应商协同，防范供应风险。</li>
                            <li>完善应急预案，保障工期与质量。</li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 风险分布图
const pieRef = ref<HTMLDivElement>()
onMounted(() => {
    if (pieRef.value) {
        const pieChart = echarts.init(pieRef.value)
        pieChart.setOption({
            tooltip: { trigger: 'item' },
            legend: {
                bottom: -12, orient: 'horizontal'
            },
            series: [{
                name: '风险分布',
                type: 'pie',
                radius: ['45%', '75%'],
                itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}: {d}%',
                    overflow: 'truncate',
                    fontSize: 14,
                    color: '#333'
                },
                labelLine: {
                    show: true,
                    length: 18,
                    length2: 14,
                    smooth: true
                },
                labelLayout: { hideOverlap: true }, // 防重叠关键
                data: [
                    { value: 4, name: '技术难点' },
                    { value: 3, name: '工期延误' },
                    { value: 2, name: '极端天气' },
                    { value: 2, name: '材料供应' },
                    { value: 1, name: '其他' }
                ]
            }],
            color: ['#E6A23C', '#409EFF', '#F56C6C', '#67C23A', '#13C2C2']
        })
    }
})


// 问题列表
const problemList = [
    {
        title: 'C区土壤修复难点',
        desc: '深层污染物清除工艺复杂，修复周期长。',
        level: '高',
        advice: '加强技术攻关，引入外部专家协作。'
    },
    {
        title: 'G区材料供应风险',
        desc: '主要修复材料未能按期到场，影响进度。',
        level: '中',
        advice: '优化采购流程，加强与供应商沟通。'
    },
    {
        title: '极端天气影响',
        desc: '7月多次强降雨导致施工延期。',
        level: '中',
        advice: '完善应急预案，合理调整工期。'
    },
    {
        title: '水体修复达标压力大',
        desc: '部分区域水质指标波动，达标难度高。',
        level: '高',
        advice: '增加在线监测频率，动态调整修复措施。'
    }
]

// 风险级别标签
const levelTag = (level: string): 'danger' | 'warning' | 'info' => {
    switch (level) {
        case '高': return 'danger'
        case '中': return 'warning'
        default: return 'info'
    }
}

// 近期待处理问题（时间轴）
const timeline = [
    { date: '2024-06-03', title: 'C区难点技术评审', color: '#E6A23C', desc: '专家小组讨论优化方案' },
    { date: '2024-06-10', title: 'G区材料补充采购', color: '#409EFF', desc: '材料入场计划调整' },
    { date: '2024-06-20', title: '防洪排涝应急演练', color: '#F56C6C', desc: '联合应急部门' }
]
</script>

<style scoped>
.eco-problem-view {
    width: 100%;
    margin: 0;
    padding: 32px 0;
}

.section-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 14px;
    color: #308d2d;
}

.chart-title {
    font-size: 17px;
    color: #222;
    font-weight: bold;
    margin-bottom: 16px;
}

.problem-card {
    border-radius: 16px;
    background: linear-gradient(120deg, #fff 75%, #ffeccf 100%);
    box-shadow: 0 2px 12px #0001;
    margin-bottom: 16px;
    min-height: 122px;
}

.problem-title {
    font-size: 15px;
    font-weight: bold;
    color: #e07e18;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.problem-desc {
    color: #666;
    font-size: 15px;
    margin-bottom: 8px;
}

.problem-advice {
    color: #222;
    font-size: 14px;
}

.problem-summary {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin-left: 6px;
}

.problem-summary ul {
    margin: 4px 0 0 22px;
    padding: 0;
    color: #308d2d;
}
</style>
